<style>
    * {padding:0px;margin:0px;}
    div {width:800px;height:300px;overflow: hidden; position: relative;
        margin: 0 auto;margin-bottom: 100px;
    }
    
    ul {
        list-style:none;
        position: absolute;
        bottom: 10px;
        left: 50%;
        margin-left: -60px;
    }
    ul li {
        float: left;
        width: 10px;
        height:10px;
        background: #fff;
        border-radius: 50%;
        margin-right: 10px;
        cursor: pointer;
    }
    div img {
        width: 100%;
        height: 100%;
    }
    ul li.active {background: blue;}

    </style>
    
    
    <div class="box">
        <img src="./imgs/img1.jpg" alt="">
        <ul>
            <li class="active"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>

    <div class="box1">
        <img src="./imgs/img1.jpg" alt="">
        <ul>
            <li class="active"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>


<script type="module">

import Lbt from './lbt1.js'
const lbt1 = new Lbt('.box')
const lbt2 = new Lbt('.box1')
</script>
